<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Login</title>

  <!--用百度的静态资源库的cdn安装bootstrap环境-->
  <!-- Bootstrap 核心 CSS 文件 -->
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <!--font-awesome 核心我CSS 文件-->
  <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 在bootstrap.min.js 之前引入 -->
  <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
  <!-- Bootstrap 核心 JavaScript 文件 -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  <style>
    html{
      width: 100%;
      height: 100%;
    }
    /*设置背景图片*/
    body {
      width: 100%;
      height: 100%;
      background: url(../img/network.jpg) no-repeat;
      background-size:cover;
      font-size: 15px;
      background-position:bottom;
      background-attachment: fixed;
    }
    /*给表单的边框设置大小,颜色和不透明度*/
    .form {
      background: rgba(255,255,255,0.9);
      width:400px;margin:120px auto;
    }
    /*设置字体和大小*/
    label {
      font-family: Arial;font-size: 15px
    }
    /*当输入正确时,给输入框设置浅绿色*/
    input.form-control:valid{
      background-color: mintcream;
    }
    /*当输入正确时,给输入框设置浅红色*/
    input.form-control:invalid{
      background-color: #EBEEFD;
      /*#ffeeed*/
    }
    /*设置图标为行内元素，并设置大小和颜色*/
    .fa{
      display: inline-block;
      top: 27px;
      left: 6px;
      position: relative;
      color: #575757;
    }
    /*为几个输入框设置padding,防止和图标重合*/
    input[type="text"],input[type="password"],input[type="email"]{
      padding-left:26px;
    }
    .form-title{
      padding-top:20px;
    }
    #button{
      padding-bottom: 50px;
    }
    .return_banner{
      margin: 20px 0 0 0;
      width: 100%;
      height: 40px;
    }
    .navi_return{
      font-family: 宋体;
      text-decoration:none;
      font-size: 24px;
      margin: 0 0 0 60px;
    }
    .navi_return:hover{
      text-decoration:none;
    }

  </style>
</head>
<body>
<div class="container">
  <div class="form row">
    <!--登录表单-->
    <form action="login" class="form-horizontal col-sm-offset-3 col-md-offset-3" id="loginForm">
      <!--调转到首页html-->
      <div class="return_banner">
        <a href="Home.html" class="navi_return">网站首页</a>
      </div>
      <h3 class="form-title">登录</h3>
      <div class="col-sm-9 col-md-9">
        <div class="form-group">
          <!--        用户名图标和用户名输入框            -->
          <i class="fa fa-user" aria-hidden="true"></i>
          <input class="form-control" type="text" name="username" id="username" placeholder="请输入用户名" required autofocus>
<!--          <span id="msg" style="font-size:12px; color:red"></span>-->
        </div>
        <!--        密码图标和密码输入框                -->
        <div class="form-group">
          <i class="fa fa-key" aria-hidden="true"></i>
          <input class="form-control " type="password" name="password" id="password" placeholder="请输入密码" required>
        </div>

        <span style="font-size:12px;color:red" id="msg"></span></br>

        <!--        用超链接跳转到注册页面               -->
        <div class="form-group">
          <br>
          <a href="register.html">没有账号？立即注册</a>
        </div>

        <!--         登录按钮           -->
        <div class="form-group">
          <input type="submit" value="登录" class="btn btn-success pull-right">
<!--          <input type="button" onclick="window.location.href='Login.html'" class="btn btn-info pull-left" id="back_btn" value="返回"/>-->
        </div>

      </div>
    </form>
  </div>
</div>
</body>

<script type="text/javascript">
  //绑定点击事件的函数
  function checkForm(){
    //得到名称和密码
    var uname=$("#username").val();
    var upwd=$("#password").val();
    //判断用户名和密码是否为空
    if(isEmpty(username)||isEmpty(password)){
      $("#msg").html("名称或密码不能为空!");
      return;
    }

    //不为空时清除<span>中的提示信息msg
    $("#msg").html("");

    //用ajax发送请求
    $.ajax({
      type:"post",
      url:"login",
      data:{
        'username':username,
        'password':password
      },
      success:function(data){
        console.log(data);
        if(data.code==1){ //code=1登录成功
          //跳转到的页面
          window.location.href="../newindex.html";
        }else{
          $("#msg").html(data.msg); //通过id=msg获取<span>标签,来显示提示信息
        }
      }
    });
  }


  //再在外面定义一个判断输入字符串是否为空的函数
  function isEmpty(str){
    if(str==null||str.trim()==""){
      return true;//为空或者为null则返回true
    }
    return false;
  }

</script>

</html>
